<template>
    <div style="padding: 5% 20%;">
        <div class="forum-detail">
            <h3>{{ forum.title }}</h3>
            <div style="display: flex;">
                <img :src="imageBaseURL + forum.coverImage" style="width: 200px; height: auto; margin-top: 30px;" fit="fill"/>
                <div class="forum-content" v-html="forum.content"></div>
            </div>
            <!-- <img :src="imageBaseURL + forum.coverImage" style="width: 100%; height: 150px; margin-top: 30px;" fit="fill"/>
            <div class="forum-content" v-html="forum.content"></div> -->
            <p>创建人：{{ forum.userName }}</p>
            <p>{{ formatterTime1(forum.createTime) }}</p>
            <p>
                <el-text>
                    <el-icon><View /></el-icon>
                    {{forum.views}}
                </el-text>
            </p>
            <!-- <p>
                <el-text @click="doCollect">
                    <el-icon v-if="collectFlag"><StarFilled /></el-icon>
                    <el-icon v-else><Star /></el-icon>
                    {{collects}}
                </el-text>
            </p> -->
        </div>
        <div class="forum-comment">
            <el-input v-model="content" v-on:keyup.enter="commentSend" clearable maxlength="50" show-word-limit>
                <template #append>
                    <el-button type="primary" @click="commentSend">发送</el-button>
                </template>
            </el-input>
            <ul style="list-style: none; margin-top: 30px;">
                <li style="width: 100%; margin-bottom: 20px;" v-for="item in commentList">
                    <p style="font-size: 16px; color: #afa9a9;">{{ item.userName }}  {{ formatterTime1(item.createTime) }}</p>
                    <p style="font-size: 16px; text-indent: 1em;">{{ item.content }}</p>
                </li>
            </ul>
        </div>
    </div>
</template>
    
<script setup>
import { getCurrentInstance, reactive, ref } from "vue";
import { imageBaseURL, formatterTime1 } from "@/global"
const { proxy } = getCurrentInstance()

const forumId = proxy.$route.params.id
const forum = reactive({})
let collectFlag = ref(false)
let collects = ref(0)
const detailInit = async () => {
    let result = await proxy.axios.get('forum/detail?id=' + forumId)
    if (!result) {
        return
    }
    collectFlag.value = result.collectFlag
    collects.value = result.collects
    Object.assign(forum, result)
    document.title = result.title
}
detailInit()

let commentList = ref([])
const commentInit = async () => {
    let result = await proxy.axios.get('forumComment/list?forumId=' + forumId)
    if (!result) {
        return;
    }
    commentList.value = result
}
commentInit()

let content = ref("")
const commentSend = async () => {
    let param = {
            forumId: forumId,
            content: content.value
    }
    let result = await proxy.axios.post('forumComment/save', param)
    if (!result) {
        return
    }
    content.value = ""
    commentInit()
}

// const doCollect = async () => {
//     let result = await proxy.axios.get('forumCollect?forumId=' + forumId)
    
//     collects.value = result
//     collectFlag.value = !collectFlag.value
// }

</script>

<style lang="scss" scoped>
.forum-detail h3 {
    text-align: center;
}
.forum-detail .forum-content {
    margin-top: 30px;
    margin-left: 30px;
    text-indent: 2em;
    min-height: 200px;
}
.forum-detail p {
    text-align: right;
    /* padding-right: 5%; */
}
.forum-comment {
    padding: 5% 2%;
}
</style>

<!-- <template>
    <div>
        帖子详情
    </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>

</style> -->